<template>
  <div class="grantCoupon">
    <el-form :model="formData" label-width="130px" :rules="rules" ref="ruleForm">
      <el-form-item label="类型:">
        <el-radio v-model="formData.type" label="1">用户</el-radio>
        <el-radio v-model="formData.type" label="2">商户</el-radio>
      </el-form-item>

      <el-form-item label="停车券:" prop="bizParkTicketId">
        <el-select v-model="formData.bizParkTicketId" size="mini">
          <el-option
          v-for="item in ticketRules"
          :label="item.parkingDuration+'小时'+item.sellPrice+'元'+'有效期'+item.validityDays+'天'"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="formData.type == '1'" label="适配停车场:" prop="parkIdList">
        <el-select v-model="formData.parkIdList" @change="" clearable placeholder="请输入停车场名称搜索" size="mini" multiple filterable remote :remote-method="remoteMethod">
          <el-option
          v-for="item in parkList"
          :label="item.parkName"
          :key="item.id"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发放数量:" prop="quantity">
        <el-input v-model.number="formData.quantity" size="mini"></el-input>
      </el-form-item>

      <el-form-item v-if="formData.type == '1'" label="每人限领数量:" prop="limitQuantityPerson">
        <el-input v-model.number="formData.limitQuantityPerson" size="mini"></el-input>
      </el-form-item>

      <el-form-item v-if="formData.type == '2'" label="每天限领数量:" prop="limitQuantityShopEveryDay">
        <el-input v-model.number="formData.limitQuantityShopEveryDay" size="mini"></el-input>
      </el-form-item>

    </el-form>

    <div style="text-align: center;">
      <el-button @click="$emit('closeDialog')">取消</el-button>
      <el-button type="warning" @click="submit('ruleForm')">确认发放</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'grantCoupon',

    data() {
      return {
        formData: {
          type: '1'
        },
        rules: {
          bizParkTicketId: [{ required: true, message: '请选择停车券', trigger: 'blur' }],
          parkIdList: [{ required: true, message: '请选择适配停车场', trigger: 'blur' }],
          quantity: [{ required: true, message: '请输入发放数量', trigger: 'blur' }],
          limitQuantityPerson: [{ required: true, message: '请输入限领数量', trigger: 'blur' }],
          limitQuantityShopEveryDay: [{ required: true, message: '请输入限领数量', trigger: 'blur' }]
        },
        ticketRules: [],
        parkList: [],
        searchForm: {
          currentPage: 1,
          pageSize: 1000
        },
      }


    },
    mounted() {
      this.getTicketRule();
    },
    methods: {
      getTicketRule() {
        this.$axios({
          method: 'get',
          url: '/business/park-ticket-rule/page',
          params: {currentPage: 1,pageSize: 10}
        }).then((res) => {
          if(res.code == 200) {
            this.ticketRules = res.data.records;
          }
        })
      },

      getParkList() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/getParkListByParkName',
          params: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.parkList = res.data.records;
          }
        })
      },

      remoteMethod(query) {
        this.searchForm.parkName = query;
        this.getParkList()
      },

      submit(form) {
        this.$refs[form].validate((valid) => {
          if(valid) {
            this.$axios({
              method: 'post',
              url: '/platform/platform-ticket/add',
              data: this.formData
            }).then((res) => {
              if(res.code == 200) {
                this.$message.success('发放停车券成功');
                this.$emit('closeDialog');
                this.$emit('refresh');
              } else {
                this.$message.warning('发放停车券失败')
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .el-input,
  .el-select {
    width: 200px;
  }




</style>
